<template>
	<view>
		<view class="page-section page-section-gap map-container">
			<map style="width: 100%; height: 40vh;" :style="{height:mapheight}" :show-location='true'
				:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
				@callouttap='callouttap' @tap="handleMapTap">
				<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="onControltap">
					<cover-image class="cover-image" @click="play" src=""></cover-image>
					<cover-view>
						定位
					</cover-view>
				</cover-view>
			</map>
		</view>
		<view class="center">
			<view class="zb">
				<text>周边网点</text>
			</view>
			<view class="bank" v-for="(item,index) in marker" :key="index">
				<view class="left">
					<img src="../../static/img/dingwei.png" alt="">
				</view>
				<view class="right" @click="moveToMarkerLocation(item)">
					<view class="rtop">
						<text class="rtop_2">{{item.title}}</text>
						<view class="rtop_1">
							<text>营业中</text>
						</view>
					</view>
					<view class="rbootom">
						<text>{{item.distance}}</text>
						<text>|</text>
						<text>{{item.place}}</text>
					</view>
				</view>
				<view class="zuih">
					<img src="../../static/img/right.png" alt="">
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		conten,
		keepy
	} from "../../API/server.js";
	export default {
		data() {
			return {
				latitude: null, //纬度
				longitude: null, //经度
				scale: 13, //缩放级别
				bottomData: false,
				marker: [],

			}
		},
		onLoad() {

		},
		onShow() {
			this.map();
			this.getLocation();
			console.log(this.aaa);
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '40vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			moveToMarkerLocation(item) {
				// 将地图视图移动到标记的位置
				console.log(item);
				this.longitude = this.marker[item.id -1].longitude;
				this.latitude = this.marker[item.id -1].latitude;
			},
			handleMapTap(marker) {
				// 使用点击的经纬度来更新地图中心点
				this.latitude = marker.latitude;
				this.longitude = marker.longitude;
				console.log("点击");
			},
			map() {
				keepy().then((res) => {
					console.log(res.data.data);
					this.marker = res.data.data;
					this.marker = this.marker.map(item => {
						return {
							...item,
							callout: {
								content: item.title,
								display: 'ALWAYS',
								borderRadius: 15, //边框圆角
								padding: '10',
								bgColor: '#e51860', //背景颜色
								color: '#ffffff'
							}
						}
					})
					console.log(this.marker);
				})
			},
			getLocation() {
				uni.getLocation({
					geocode: true,
					type: 'wgs84',
					success: (res) => {
						// console.log(res, '获取当前位置')
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
				});
			},
			//定位
			onControltap() {
				this.getLocation()
				uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: this.latitude,
					longitude: this.longitude,
				});
				console.log('定位');
			},
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)

			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			}
		}
	}
</script>
<style lang='scss' scoped>
	.map-container {
		position: relative;
		overflow: hidden;
		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			color: #484848;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			bottom: 100rpx;
			right: 32rpx;
		}

		.cover-image {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.center {
		padding: 0 20rpx;

		.zb {
			margin: 20rpx 0;
		}

		.bank {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #7f7f7f;

			.left {
				flex: 2;
				display: flex;
				justify-content: center;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.right {
				flex: 12;

				.rtop {
					display: flex;

					.rtop_2 {
						font-size: 35rpx;
						margin-right: 40rpx;
					}

					.rtop_1 {
						padding: 2rpx 8rpx;
						border: 1px solid green;
						color: forestgreen;
					}
				}

				.rbootom {
					margin-top: 20rpx;
					color: #7f7f7f;
					font-size: 25rpx;

					text {
						margin-right: 20rpx;
					}
				}
			}

			.zuih {
				flex: 1;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>